<!--
 * @Date: 2020-03-16 11:36:13
 * @LastEditors: 黄栋
 * @LastEditTime: 2020-04-22 09:42:05
 * @FilePath: /cloudAdmin/src/views/market/promotion/shop/coupon1.vue
 --> 
<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/promotion' }">店铺营销</el-breadcrumb-item>
          <el-breadcrumb-item>优惠券</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-form inline size="small">
        <el-form-item>
          <el-select v-model="form.type" placeholder="请选择" style="width:150px">
            <el-option value>全部</el-option>
            <el-option value="1">进行中</el-option>
            <el-option value="2">已结束</el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.keywords" style="width:200px">
            <template slot="append">
              <el-button @click="getDataList">查询</el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item style="float:right">
          <el-button @click="addCoupon('')">添加优惠券</el-button>
        </el-form-item>
      </el-form>
      <el-button
        style="margin-bottom:10px"
        type="danger"
        size="small"
        @click="delCoupon('')"
        :disabled="dataListSelections.length <= 0"
      >批量删除</el-button>
      <el-table
        size="mini"
        :data="tableData"
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandle"
        :header-cell-style="{background:'#F7F7F7',color:'#1E1E1E'}"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="优惠券名称"></el-table-column>
        <el-table-column width="260px" label="有效期" show-overflow-tooltip>
          <template slot-scope="{row}">{{row.start_time}} - {{row.end_time}}</template>
        </el-table-column>
        <el-table-column prop="number" label="库存"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="{row}">
            <span v-if="row.status==1">开启</span>
            <span v-else>关闭</span>
          </template>
        </el-table-column>
        <el-table-column width="160px" label="操作">
          <template slot-scope="{row}">
            <!-- <el-button type="text">详情</el-button> -->
            <el-button @click="addCoupon(row.id)" v-if="row.status==1" type="text">修改</el-button>
            <el-button @click="delCoupon(row.id)" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top:10px"></div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="form.page_num"
        :total="form.total"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </el-card>
    <el-dialog title="投放详情" width="550px" :close-on-click-modal="false" :visible.sync="visible">
      <el-form ref="dataForm" size="small" :rules="dataRule" :model="editForm" label-width="90px">
        <el-form-item label="优惠券名称">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="减免金额">
          <el-input v-model="editForm.reduce">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="使用条件">
          <el-input style="width:100$" v-model="editForm.min_price">
            <template slot="prepend">订单总价满</template>
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="每人限领">
          <el-input v-model="editForm.member_num">
            <template slot="append">张</template>
          </el-input>
        </el-form-item>
        <el-form-item label="有效时间" required>
          <el-col :span="11">
            <el-form-item prop="start_time">
              <el-date-picker
                style="width:100%"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                v-model="editForm.start_time"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-form-item prop="end_time">
              <el-date-picker
                style="width:100%"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                v-model="editForm.end_time"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="库存">
          <el-input v-model="editForm.number">
            <template slot="append">张</template>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="visible = false">取消</el-button>
        <el-button size="small" type="primary" @click="dataFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  get_coupon_list,
  get_coupon_info,
  addOredit_coupon,
  del_coupon
} from "@/utils/api/market";
export default {
  data() {
    return {
      form: {
        page_num: 10,
        page: 1,
        total: 0
      },
      dataListLoading: false,
      dataListSelections: [],
      editForm: {},
      tableData: [],
      visible: false,
      dataRule: {
        name: [
          { required: true, message: "快递单号不能为空", trigger: "blur" }
        ],
        reduce: [
          { required: true, message: "满减金额不能为空", trigger: "blur" }
        ],
        min_price: [
          { required: true, message: "使用最小金额不能为空", trigger: "blur" }
        ],
        member_num: [
          { required: true, message: "每人可领取数量不能为空", trigger: "blur" }
        ],
        number: [{ required: true, message: "数量不能为空", trigger: "blur" }],
        start_time: [
          { required: true, message: "有效期开始时间不能为空", trigger: "blur" }
        ],
        end_time: [
          { required: true, message: "有效期截止时间不能为空", trigger: "blur" }
        ]
      }
    };
  },

  activated() {
    this.getDataList();
  },
  methods: {
    getDataList() {
      get_coupon_list(this.form).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.form.total = res.data.total;
        }
      });
    },
    /**显示 */
    addCoupon(id) {
      if (id) {
        get_coupon_info({ id: id }).then(res => {
          if (res.code == 200) {
            this.editForm = Object.assign({}, this.editForm, res.data);
          }
        });
      } else {
        this.editForm = {
          end_time: "",
          start_time: ""
        };
      }
      this.visible = true;
    },
    /**添加/修改 优惠券 */
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          addOredit_coupon(this.editForm).then(res => {
            this.visible = false;
            if (res.code == 200) {
              this.$message({
                message: res.message,
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getDataList();
                }
              });
            } else {
              this.$message.error(res.message);
            }
          });
        }
      });
    },
    /**删除优惠券 */
    delCoupon(id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map(item => {
            return item.id;
          });
      this.$confirm(
        `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        del_coupon({ id: ids.join(",") }).then(res => {
          if (res.code == 200) {
            this.$message({
              message: res.message,
              type: "success",
              duration: 1500,
              onClose: () => {
                this.getDataList();
              }
            });
          } else {
            this.$message.error(res.message);
          }
        });
      });
    },
    /**批量 */
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    // 每页数
    handleSizeChange(val) {
      this.form.page_num = val;
      this.form.page = 1;
      this.getDataList();
    },
    // 当前页
    handleCurrentChange(val) {
      this.form.page = val;
      this.getDataList();
    }
  }
};
</script>

<style>
.line {
  text-align: center;
  vertical-align: bottom;
}
</style>